<template>
	<view>
		<view class="status-box" style="display: flex;">
			<view style="font-size: 16px;">{{orStatusName}}</view>
			<view style="padding: 7rpx 15rpx;" v-if="orStatus==0">
				<span>{{fen}}</span>分钟 <span>{{miao}}</span>秒后自动取消订单
			</view>
		</view>
		<view class="dizhi-box" v-if="orPeisongtype==1">
			<view class="mapdot">
				<u-icon name="map" color="#2979ff" size="28"></u-icon>
			</view>
			<view class="dizhi-info">
				<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
					<view>收货人：{{address.adName}}</view>
					<view>{{address.adPhone}}</view>
				</view>
				<view>收货地址：<text class="moren">[默认]</text>{{address.adDetail}}</view>
			</view>
		</view>
		<view class="dizhi-box" v-if="orPeisongtype!=1">
			<view class="mapdot">
				<u-icon name="map" color="#2979ff" size="28"></u-icon>
			</view>
			<view class="dizhi-info">
				<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
					<view>联系人：{{zitiAddress.name}}</view>
					<view>{{zitiAddress.phone}}</view>
				</view>
				<view>自提地址：{{zitiAddress.zitiDetail}}</view>
				<view style="display: flex;justify-content: space-between;margin-top: 10rpx;">
					<view style="background-color: orange;border-radius: 20rpx;padding: 0 10rpx 0 10rpx;" @click="daohang(zitiAddress.zitiId)">导航： 去这里</view>
					<view style="color: #007aff;" @click="callUp()">拨打电话</view>
				</view>
			</view>
		</view>
		<view class="tips">
			商品信息
		</view>
		<view class="goods-box" v-for="(item,i) in odlist" :key="item.index">
			<view class="goods-info">
				<view @click="goDetail(i)">
					<image :src="showGoodsPicture(item.ppGoods.gimages)" class="goods-img" mode="heightFix"></image>
				</view>
				<view class="goods-name">
					<view @click="goDetail(i)">
						<view>{{item.ppGoods.gname}}</view>
						<view class="qian">{{item.odCost/item.odNum}}/{{item.ppGoods.gdanwei}}</view>
					</view>
					<view @click="goDetail(i)">
						<view class="jianjie">{{item.guiges}}</view>
						<view>×{{item.odNum}}</view>
					</view>
					<view v-if="orStatus==2 && orPeisongtype==1" style="color: red;float: right;margin-right: 15rpx;" @click="goRefunds(i)">
						申请退货
					</view>
				</view>
			</view>
		</view>
		<view class="jiage-box">
			<view class="allmoney">
				<view>商品总价</view>
				<view class="qian">{{allMoney}}元</view>
			</view>
			<view class="allmoney" v-if="orPeisongtype==1">
				<view>运费(快递)</view>
				<view class="qian">{{goodsorders.orYunfei}}元</view>
			</view>
			<view class="allmoney">
				<view>订单总价</view>
				<view class="qian">{{zongjia}}元</view>
			</view>
		</view>
		<view class="xupay">
			<view class="allmoney">
				<view>需付款</view>
				<view class="qian">{{zongjia}}元</view>
			</view>
		</view>
		<view class="status-box">
			<view v-if="orStatus==0" class="status-btn1" @click="deleteOrder()">删除订单</view>
			<view v-if="orStatus==0" class="status-btn" @click="goPay()">待付款(去支付)</view>
			<view v-if="orStatus==1" class="status-btn">等待卖家发货</view>
			<view v-if="orStatus==3" class="status-btn">买家已经收货</view>
			<view v-if="orStatus==2" class="status-btn" @click="shouhuo()">确认收货</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orId:'',		 //订单ID
				unionid:'',		 //联合订单ID
				adId:'',		 //收货地址ID
				orStatus:'',	 //订单状态
				orStatusName:'', //订单状态名称
				orPeisongtype:'',//配送类型
				userId:'',		 //用户ID
				odlist:[],		 //订单信息
				address:[],		 //收货地址信息
				zitiAddress:[],	 //自提地址信息
				goodsorders:[],	 //订单信息
				goodsreturn:[],	 //订单退换货信息
				zongjia:0,		 //订单总价、需付款
				allMoney:'',     //订单总金额(商品总价)
				orderTime:'',	 //订单时间
				systemNow:'',	 //系统当前时间
				fen:'00',		 //倒计时分钟
				miao:'00',		 //倒计时秒钟
			}
		},
		onLoad(opt) {
			this.orId = opt.orId
			this.adId = opt.adId
			this.orStatus = opt.orStatus
			this.orPeisongtype = opt.orPeisongtype
			this.userId = uni.getStorageSync('usersId')
			this.unionid = opt.unionid
			this.allMoney = opt.money
			this.orderTime = opt.orTime
			this.showStatus(opt.orStatus,opt.orPeisongtype)
			//请求得订单详情
			this.$http.get('/ppOrder/selectPPOrderDetail',{
				orId:this.orId,
			}).then(res => {
				console.log(res);
				for (let key in res.data) {
					if(key == "ppOrderDetail"){
						this.odlist = res.data[key]
					}
					if(key == "address"){
						this.address = res.data[key]
					}
					if(key == "ppZitidian"){
						this.zitiAddress = res.data[key]
					}
					if(key == "ppOrder"){
						this.goodsorders = res.data[key];
						this.zongjia = this.goodsorders.orPrice*1;
						if(this.orPeisongtype==1){
							this.allMoney = (this.goodsorders.orPrice*1 - this.goodsorders.orYunfei*1).toFixed(2);
						}else{
							this.allMoney = this.goodsorders.orPrice*1;
						}
					}
				}
			})
			if(this.orStatus == 0){
				//未支付订单30分钟倒计时
				this.countTime()
			}
		},
		methods: {
			//点击导航了
			daohang(zitiId){
				console.log("点击导航了")
				uni.navigateTo({
					url:this.host+'/daohang/goGetCurrentPositionViewZitidian?zitiId='+zitiId
				})
			},
			//拨打电话
			callUp(){
				uni.makePhoneCall({
				    phoneNumber: this.zitiAddress.phone //仅为示例
				});
			},
			//跳转申请退换货界面
			goRefunds(i){
				console.log("跳转到退换货类型去:"+i)
				uni.navigateTo({
					url:'../refund/refundType?orId='+this.odlist[i].orId+'&gid='+this.odlist[i].gid+'&tel='+this.address.adPhone+'&odId='+this.odlist[i].odId+'&gname='+this.odlist[i].ppGoods.gname+'&gimages='+this.odlist[i].ppGoods.gimages+'&jianjie='+this.odlist[i].ppGoods.jianjie+'&gsId='+this.odlist[i].ppGoods.gsId
				})
			},
			//未支付订单30分钟倒计时
			countTime() {
				// 获取系统当前时间
				this.$http.get('/ppOrder/getTime',{
					
				}).then(res => {
					this.systemNow = res.data.data;
				})
				if(this.systemNow==null || this.systemNow=="" || this.systemNow==0 || this.systemNow==1){
					this.fen = '30'
					this.miao = '00'
					//递归每秒调用countTime方法，显示动态时间效果
					setTimeout(()=>{
						this.countTime()
					},1000)
				}else{
					// this.systemNow++;
					//设置截止时间
					let str = this.orderTime;
					let endDate = new Date(str);
					let end = endDate.getTime()+(1000*60*30);
					//时间差
					let leftTime = end-this.systemNow;
					//定义变量 d,h,m,s保存倒计时的时间
					let m=0,s=0;
					m = Math.floor(leftTime/1000/60%60);
					s = Math.floor(leftTime/1000%60);
					if(m==0 && s ==0){
						//超过30分钟未支付跳主页面
						uni.navigateTo({
							url:'../center/center'
						})
					}
					//将倒计时赋值到div中
					this.fen = m;
					this.miao = s;
					//递归每秒调用countTime方法，显示动态时间效果
					setTimeout(()=>{
						this.countTime()
					},1000)
				}
			},
			//去支付
			goPay(){
				uni.navigateTo({
					url:'submitOrder?orid='+this.unionid+'&money='+this.zongjia+'&gimages='+this.odlist[0].ppGoods.gimages
				})
			},
			//跳商品详情页
			goDetail(i){
				uni.navigateTo({
					url:'../goods/goodsDetail?gid='+this.odlist[i].gid
				})
			},
			//删除订单
			deleteOrder(){
				uni.showModal({
					title:'提示',
					content:'确定删除该订单？',
					success:(res)=> {
						if(res.confirm){
							this.$http.get('/ppOrder/deletePPOrderxcx',{
								orId:this.goodsorders.orId,
								userid:uni.getStorageSync('usersId')
							}).then(res => {
								uni.$emit('checkPinpaiUserInfo');
								uni.$emit('getPinpaiOrderByGroup');
								this.$u.toast("删除成功")
								setTimeout(function(){
									uni.navigateTo({
										url:'../center/center'
									})
								},500)
							})
						}else if(res.cancel){
							
						}
					}
				})
			},
			//确认收货
			shouhuo(){
				uni.showModal({
					title:'提示',
					content:'确定已经收货吗？',
					success:(res)=> {
						if(res.confirm){
							this.$http.get('/ppOrder/updatePPOrderStatus',{
								orId:this.goodsorders.orId,
							}).then(res => {
								uni.$emit('checkPinpaiUserInfo');
								uni.$emit('getPinpaiOrderByGroup');
								this.orStatus = 3
								this.orStatusName = "已收货"
								setTimeout(function(){
									uni.navigateTo({
										url:'../center/center'
									})
								},500)
							})
						}else if(res.cancel){
							
						}
					}
				})
			},
			//处理图片
			showGoodsPicture(picture){
				if(picture.length<0){
					return '../../static/center/tuijian.png'
				}else{
					return this.host + picture
				}
			},
			//处理订单状态
			showStatus(s,orPeisongtype){
				if(s=='0')
					this.orStatusName = "等待买家付款";
				else if(s=='1')
					if(orPeisongtype==1)
						this.orStatusName = "等待卖家发货";
					else
						this.orStatusName = "待收货"
				else if(s=='2')
					this.orStatusName = "待收货";
				else if(s=='3')
					this.orStatusName = "已收货";
				else if(s=='4')
					this.orStatusName = "退货退款中";
				else if(s=='5')
					this.orStatusName = "退货换货完成";
				else if(s=='6')
					this.orStatusName = "退款完成";
				else if(s=='7')
					this.orStatusName = "已取消订单";
			}
		}
	}
</script>

<style scoped>
	.status-box,.dizhi-box{
		background-color: white;
		padding: 20rpx;
	}
	.goods-box{
		background-color: white;
		margin-top: 5rpx;
	}
	.dizhi-box{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}
	.tips{
		margin-top: 20rpx;
		background-color: white;
		padding-top: 20rpx;
		padding-left: 20rpx;
		font-size: 22rpx;
	}
	.dizhi-box .dizhi,.dizhi-box .mapdot{
		flex: 0.5;
		text-align: center;
	}
	.dizhi-box .dizhi-info{
		flex: 5;
	}
	.moren{
		color: red;
	}
	.dizhi-box .tel{
		flex: 2;
	}
	.goods-info{
		display: flex;
		padding: 10rpx;
		height: 140rpx;
		align-items: flex-start;
		color: #111111;
	}
	.goods-info>view{
		flex: 1;
	}
	.goods-name>view{
		display: flex;
		justify-content: space-between;
		padding-left: 15rpx;
		font-size: 12px;
	}
	.goods-info>view:nth-child(2){
		flex: 4;
	}
	.goods-info .goods-img{
		height: 100rpx;
		width: 100rpx;
	}
	/* .qian::before{
		content: '￥';
	} */
	.allmoney{
		display: flex;
		padding: 10rpx 20rpx;
		justify-content: space-between;
	}
	.allmoney:last-child{
		padding: 20rpx ;
		background-color: white;
		margin-top: 10rpx;
	}
	.jiage-box .allmoney:last-child{
		margin-top: 0rpx;
		padding: 20rpx 20rpx;
		padding-top: 10rpx;
	}
	.jiage-box{
		margin-top: 10rpx;
		background-color: white;
		padding: 10rpx 0rpx;
	}
	.jiage-box .allmoney{
		color: #ccc;
	}
	.jiage-box .allmoney:last-child{
		color: #111;
	}
	.xupay .allmoney:last-child .qian{
		color: #FF7900;
	}
	.status-box{
		margin-top: 10rpx;
		display: flex;
		justify-content: flex-end;
		padding-right:20rpx;
		font-size: 24rpx;
	}
	.status-box:first-child{
		justify-content: flex-start;
	}
	.status-btn2{
		padding: 10rpx 20rpx;
		margin-right: 20rpx;
		color: #000000;
		border-radius: 40rpx;
		border: 2rpx solid #000000;
	}
	.status-btn1{
		padding: 10rpx 20rpx;
		margin-right: 20rpx;
		background-color: white;
		color: red;
		border-radius: 40rpx;
		border: 2rpx solid red;
	}
	.status-btn{
		padding: 10rpx 20rpx;
		background-color: white;
		color: #FF7900;
		border-radius: 40rpx;
		border: 2rpx solid #FF7900;
	}
</style>
